/**
 * @module
 * @author Yun Tang
 * @date 2020-12-25 23:17:22
 */
/**
 * @module  首页
 * @author xiongsha
 * @date 2020-12-21 21:31:01
 */

import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import HeaderComponent from '@src/pages/components/Header';
import request from '@src/utils/request';
import ListViewWithPp from '@src/components/common/ListViewPp';
import './index.less';

interface IList {
  total_amount?: string;
  [prop: string]: any;
}

function OrderList(props, ref) {
  const [list, setList] = useState<IList[]>([]);
  const [page, setPage] = useState<number>(1);
  const [total, setTotal] = useState<number>(1);

  const getList = async (page) => {
      const res = await request('get', '/api/v1/orders', {
        page,
        pageSize: 10,
      });
      if (res && res.code === 200) {
        const { data } = res.data;
        let listData: IList[] = list;
        if (page === 1) {
          listData = data;
        } else {
          listData = listData.concat(data);
        }
        setTotal(res.data.total);
        setList(listData);
      }
  };

  const onPullDown = () => {
    // 下拉刷新
    setPage(1);
    // mresident.offer.fetching = 'refreshing';
    return getList(1);
  };

  const onPullUp = () => {
    // 上拉加载
    setPage(page + 1);
    // mresident.offer.fetching = 'loadingMore';
    return getList(page + 1);
  };

  useImperativeHandle(ref, () => ({
    changeVal: () => {
      setPage(1);
      getList(1);
    },
  }));

  return (
    <div className="order-list">
      <HeaderComponent text="订单列表" />
      <ListViewWithPp
        className={`order-list-content`}
        data={list}
        styleHeight={undefined as any}
        hasMore={page * 10 < total}
        onPullDown={onPullDown}
        onPullUp={onPullUp}
        useBodyScroll={true}
        initialListSize={10}
        renderRow={(cur) => (
          <div
            className="order-list"
            key={cur.id}
            onClick={() => {
              if (!cur.closed) {
                props.history.push(`/orderDetail/${cur.id}`);
              }
            }}
          >
            <p className="order-name">
              <span>{cur.no}</span>
              <span className="order-status">
                {cur.closed ? '已关闭' : cur.paid_at ? '已支付' : '未支付'}
              </span>
            </p>
            <p className="order-moeny">¥{cur.total_amount}</p>
          </div>
        )}
      />
    </div>
  );
}

// function FancyInput(props, ref) {
//   const inputRef = useRef();
//   useImperativeMethods(ref, () => ({
//     focus: () => {
//       inputRef.current.focus();
//     }
//   }));
//   return <input ref={inputRef} />;
// }
// FancyInput = forwardRef(FancyInput);
// export default FancyInput
// const a = forwardRef(OrderList);
// OrderList = forwardRef(OrderList);()
export default forwardRef(OrderList);
// export default withRouter(OrderList);
